<template>
  <div class="" :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="map-container" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
    <div id="tools">
      <a id="clear" @click="clearSource()">Clear</a>
      <a id="download" download="features.json" ref="download">Download</a>
    </div>
  </div>

</template>

<script>
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import sync from 'ol-hashed';

import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import OSM from 'ol/source/OSM';
// 编辑功能
import Modify from 'ol/interaction/Modify';
// draw功能
import Draw from 'ol/interaction/Draw';
import GeometryType from 'ol/geom/GeometryType';
// 扑捉
import Snap from 'ol/interaction/Snap';
// 根据区域显示样式
import {Fill, Stroke, Style} from 'ol/style';
import {getArea} from 'ol/sphere';
import colormap from 'colormap';


const source = new VectorSource();
// 动态计算样式
const layer = new VectorLayer({
  source: source,
  style: function(feature) {
    return new Style({
      fill: new Fill({
        color: getColor(feature)
      }),
      stroke: new Stroke({
        color: 'rgba(255,255,255,0.8)'
      })
    });
  }
});
// 下载块
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
// 区域样式， 根据面积心事颜色
const min = 1e8; // the smallest area
const max = 2e13; // the biggest area
const steps = 50;
const ramp = colormap({
  colormap: 'blackbody',
  nshades: steps
});

function clamp (value, low, high) {
  return Math.max(low, Math.min(value, high));
}
function getColor (feature) {
  const area = getArea(feature.getGeometry());
  const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
  const index = Math.round(f * (steps - 1));
  return ramp[index];
}

export default {
  name: "olmap",
  title: "openlayers测试",
  data () {
    return {}
  },
  mounted () {
    let map = new Map({
      target: 'map-container',
      layers: [
        new TileLayer({
          source: new OSM()
        })
        // new TileLayer({
        //   source: new XYZSource({
        //     url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
        //   })
        // })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
    sync(map);
    map.addLayer(layer);

    map.addInteraction(new DragAndDrop({
      source: source,
      formatConstructors: [GeoJSON]
    }));
    // 编辑功能
    map.addInteraction(new Modify({
      source: source
    }));
    // // draw功能
    map.addInteraction(new Draw({
      type: 'Polygon',
      source: source
    }));
    // 扑捉
    map.addInteraction(new Snap({
      source: source
    }));
    // 下载数据
    let that = this
    source.on('change', function() {
      const features = source.getFeatures();
      const json = format.writeFeatures(features);
      that.$refs.download.href = 'data:text/json;charset=utf-8,' + json;
    });
  },
  methods: {
    clearSource () {
      source.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
  .map {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  #tools {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  #tools a {
    display: inline-block;
    padding: 0.5rem;
    background: white;
    cursor: pointer;
  }
</style>
